<template>
  <div class="head_box">
    <div class="head">
      <div class="left">
        <img src="../../assets/imgs/logo.png" alt="" />
      </div>
      <div class="center">
        <div class="i_box1">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="i_box1">
          <i class="el-icon-arrow-right"></i>
        </div>

        <div class="inp_box">
          <i class="el-icon-search"></i>
          <input
            type="text"
            v-model="searchValue"
            :placeholder="placeholder"
            @focus="inpFocus"
            @blur="inpBlur"
            @keydown.enter="downEnter"
            @click="handle"
          />
          <searchlist></searchlist>
        </div>
      </div>
      <div class="right">
        <div class="right_box">
          <div class="img_box">
            <img
              v-if="!$store.state.userLoginState"
              class="head_img"
              src="../../assets/imgs/head/avatar.png"
              alt=""
            />
            <img
              v-if="$store.state.userLoginState"
              class="head_img"
              :src="
                this.$store.state.userinfo[0] == null
                  ? '../../assets/imgs/head/avatar.png'
                  : this.$store.state.userinfo[0].profile.avatarUrl
              "
              alt=""
            />
          </div>

          <div class="p">
            <span
              ><a
                href="javascript:;"
                v-if="!$store.state.userLoginState"
                @click="login(true)"
                >未登入</a
              ></span
            >
            <span
              ><a
                href="javascript:;"
                v-if="$store.state.userLoginState"
                @click="login(false)"
                >退出登入</a
              ></span
            >
            <i class="el-icon-caret-bottom"></i>
          </div>

          <div class="i1 i">
            <i class="el-icon-setting"></i>
          </div>

          <div class="i2 i">
            <i class="el-icon-message"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import searchlist from './searchList.vue'
export default {
  components: { searchlist },
  data () {
    return {
      avatarUrl: '../../assets/imgs/head_img.jpg',
      searchValue: '',
      time: null,
      searchResultList: [],
      searchLoaction: [],
      placeholder: ''
    }
  },
  watch: {
    searchValue () {
      console.log()
      if (this.searchValue == '') {
        this.inpBlur()
      }
    }
  },
  mounted () {
    this.searchLoactionInit()
    this.request.get('/search/default').then((res) => {
      this.placeholder = res.data.showKeyword
      // console.log(res.data.showKeyword,12345)
    })
    const userinfo = localStorage.getItem('userinfo')
    if (userinfo == undefined || userinfo == null) {

    } else {
      this.$store.state.login = false
    }

    // console.log(JSON.parse(userinfo).profile.avatarUrl)
  },
  // watch: {
  //     searchValue(){
  //         //console.log(this.searchValue)

  //         //根据关键字搜索歌曲
  //         clearInterval(this.time)
  //         this.time = setTimeout(() =>{
  //             console.log(this.searchValue)
  //             this.getapi.search(this.searchValue).then((res) => {
  //                 //console.log(res.result.songs,"zxcvbnm")
  //                 this.searchResultList = res.result.songs
  //             })
  //         }, 500)
  //     }
  // },
  methods: {
    login (e) {
      if (!this.$store.state.userLoginState) {
        this.$store.state.login = true
        this.$bus.$emit('qrlogin')
      } else {
        if (!e) {
          localStorage.removeItem('userinfo')
          this.$store.state.userLoginState = !this.$store.state.userLoginState
        }
      }
    },
    inpFocus () {
      // 获取焦点显示搜索列表
      // console.log("inpFocus")
      this.$bus.$emit('inpFocus')
    },
    inpBlur () {
      // 失去焦点隐藏搜索列表
      // console.log("zxc")
      this.$bus.$emit('inpBlur')
      console.log(this)
    },
    downEnter () {
      if (this.searchValue != '') {
        this.$bus.$emit('searchResult', this.searchValue)
      } else {
        this.$bus.$emit('searchResult', this.placeholder = this.placeholder.split(' ').join(''))
      }
      // 跳转搜索结果展示页面
      this.$router.push({
        path: '/search',
        query: {
          name: this.searchValue == '' ? (this.placeholder.split(' ').join('')) : this.searchValue
        }
      })
      // 按回车键发送数据
      if (this.searchValue == '') {
        this.searchValue = this.placeholder
      }
      this.searchLoaction.unshift(this.searchValue)
      console.log(this.searchLoaction, 'zxc')
      localStorage.setItem(
        'searchLoaction',
        JSON.stringify(this.searchLoaction)
      )
      this.$bus.$emit('refresh')

      // 发送搜索数据
      console.log((this.placeholder.split(' ').join('')), 'zxcvbn')
      // 关闭搜索列表
      this.$bus.$emit('inpBlur')
    },
    searchLoactionInit () {
      const searchLoaction = localStorage.getItem('searchLoaction')
      this.searchLoaction = JSON.parse(searchLoaction) || []
      console.log(this.searchLoaction, 1234567)
      if (searchLoaction == undefined || searchLoaction == null) {
        localStorage.setItem('searchLoaction', '[' + ']')
      }
    },

    handle (e) {
      this.$bus.$emit('handle')
    }
  }
}
</script>

<style scoped>
.head_box {
  width: 100%;
  height: 60px;
  background-color: #ec4141;
  position: fixed;
  top: 0;
  z-index: 999;
}
.head {
  width: 1250px;
  height: 100%;
  margin: 0 auto;
}
.head > div {
  float: left;
  height: 100%;
}
.head .left {
  width: 20%;
  line-height: 70px;
}
.left img {
  width: 70%;
  height: 100%;
}

.head .center {
  width: 50%;
  display: flex;
  align-items: center;
}
.center .i_box1 {
  width: 25px;
  line-height: 25px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  margin-right: 5px;
  border-radius: 50%;
}
.i_box1 i {
  color: white;
}
.inp_box {
  width: 250px;
  height: 30px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-left: 10px;
  border-radius: 20px;
  position: relative;
}
.inp_box input {
  width: 200px;
  height: 100%;
  outline: none;
  border: none;
  box-sizing: border-box;
  padding-left: 10px;
}
.inp_box input::-webkit-input-placeholder {
  font-size: 0.6rem;
  color: darkgrey;
}

.head .right {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.right .right_box {
  height: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
}
.right .img_box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: white;
}
.img_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.right .p {
  font-size: 0.9rem;
  margin-left: 10px;
  color: #fbd9d9;
}
.right a {
  color: white;
}
.right .p:hover {
  color: white;
}
.right .i {
  text-align: center;
  margin-left: 10px;
  font-size: 1.45rem;
  color: #fbd9d9;
}
.right .i1:hover {
  color: white;
}
.right .i2:hover {
  color: white;
}
</style>
